import React, {  } from 'react'
import { Table, Button,Popconfirm,message } from 'antd';
import moment from 'moment'

export default function MyTable(props) {

  const {data,roles,user,setUser,reqUserDelete,setData,setModalVisible}=props

  const deleteUser=()=>{
    
    console.log(user)
    reqUserDelete({id:user._id}).then(res=>{
      message.success(res.msg)
      setData([])
    }).catch(err=>{
      message.error('删除错误',err.msg)
    })
  }

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width:'18%',
      align:'center',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width:'18%',
      align:'center',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      align:'center',
      width:'18%'
    },
    {
      title: '注册时间',
      dataIndex: 'create_time',
      key: 'create_time',
      align:'center',
      width:'20%',
      render:date=>{
        return moment(date).format('YYYY-MM-DD hh:mm:ss')
      }
    },
    {
      title: '角色',
      dataIndex: 'role_id',
      key: 'role_id',
      align:'center',
      width:'18%',
      render:id=>roles.find(i=>i._id===id)?.name
    },
    {
      title: '操作',
      key: 'action',
      width:'10%',
      align:'center',
      render: (text, record) => (
        <>
          <Button type='link' onClick={()=>setModalVisible({visible:true,type:'modify'})}>修改</Button>
          <Popconfirm title='确定要删除此用户' onConfirm={deleteUser}>
            <Button type='link'>删除</Button>
          </Popconfirm>
          
        </>
      ),
    },
  ];
  
 /*  const data = [
    {
      id: '01',
      username: 'joker',
      email: 'joker@qq.com',
      phone_code: '15600000000',
      regdate: '2020-7-8 16:08:09',
      role: 'admin',
      state:1
    },
    {
      id: '02',
      username: 'tom',
      email: 'tom@qq.com',
      phone_code: '15600000001',
      regdate: '2020-9-18 21:08:10',
      role: 'manage',
      state:1
    },
    {
      id: '03',
      username: 'tony',
      email: 'tony@qq.com',
      phone_code: '15600000002',
      regdate: '2020-11-13 16:37:06',
      role: 'personnel',
      state:1
    },
    {
      id: '04',
      username: 'jay',
      email: 'jay@qq.com',
      phone_code: '15600000003',
      regdate: '2020-12-31 13:57:19',
      role: 'personnel',
      state:1
    },
    
  ] */

  return (
    <div className='product-table'>
      <Table columns={columns} dataSource={data} bordered rowKey="_id" onRow={record=>({onClick:()=>setUser(record)})}/>
    </div>
  )
}
